<template>
  <div>
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>奖励管理</el-breadcrumb-item>
      <el-breadcrumb-item>我的奖励</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card style="height:100%;">
      <el-tabs v-model="viewName" style="height:100%;" type="card">
        <el-tab-pane label="未兑现" name="fulfilledCommitment"></el-tab-pane>
        <el-tab-pane label="已兑现" name="completedCommitment"></el-tab-pane>
      </el-tabs>
      <!-- 任务列表 -->
      <div>
        <router-view></router-view>
      </div>
    </el-card>
  </div>
</template>


<style lang="less" scoped>
</style>

<script>
export default {
  data() {
    return {
      viewName: "fulfilledTask",
    };
  },
  methods: {},
  watch: {
    viewName(newValue, oldValue) {
      this.$router.push(`/${newValue}`);
    },
  },
};
</script>